
<template>
  <el-card>
    <div class="amap-page-container">
      <el-amap
        ref="map"
        vid="amapDemo"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        class="amap-demo"
      >
        <el-amap-marker
          v-for="(marker, i) in markers"
          :key="i"
          :position="marker.position"
        ></el-amap-marker>
      </el-amap>

      <!-- <div class="toolbar">
        <button @click="getMap()">get map</button>
      </div> -->
    </div>
  </el-card>
</template>
 
  <style>
.amap-page-container {
  height: 800px;
}
</style>
  <script>
import { AMapManager } from "vue-amap";
// import { AMap } from 'vue-amap';
export default {
  data() {
    return {
      zoom: 15,
      center: [104.05968, 30.549051],
      markers: [
        {
          position: [104.05968, 30.549051],
          events: {
            click: () => {
              alert("click marker");
            },
            dragend: (e) => {
              console.log("---event---: dragend");
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          visible: true,
          draggable: false,
          template: "<span>1</span>",
        },
        {
          position: [104.033587, 30.569746],
          events: {
            click: () => {
              alert("click marker");
            },
            dragend: (e) => {
              console.log("---event---: dragend");
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          visible: true,
          draggable: false,
          template: "<span>1</span>",
        },
        {
          position: [104.091609, 30.570928],
          events: {
            click: () => {
              alert("click marker");
            },
            dragend: (e) => {
              console.log("---event---: dragend");
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          visible: true,
          draggable: false,
          template: "<span>1</span>",
        },
        {
          position: [104.074786, 30.514452],
          events: {
            click: () => {
              alert("click marker");
            },
            dragend: (e) => {
              console.log("---event---: dragend");
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          visible: true,
          draggable: false,
          template: "<span>1</span>",
        },
        {
          position: [104.043029, 30.518223],
          events: {
            click: () => {
              alert("click marker");
            },
            dragend: (e) => {
              console.log("---event---: dragend");
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          visible: true,
          draggable: false,
          template: "<span>1</span>",
        },
        {
          position: [104.161819, 30.548164],
          events: {
            click: () => {
              alert("click marker");
            },
            dragend: (e) => {
              console.log("---event---: dragend");
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          visible: true,
          draggable: false,
          template: "<span>1</span>",
        },
        {
          position: [103.979514, 30.596937],
          events: {
            click: () => {
              alert("click marker");
            },
            dragend: (e) => {
              console.log("---event---: dragend");
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          visible: true,
          draggable: false,
          template: "<span>1</span>",
        },
        {
          position: [104.061912, 30.627076],
          events: {
            click: () => {
              alert("click marker");
            },
            dragend: (e) => {
              console.log("---event---: dragend");
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          visible: true,
          draggable: false,
          template: "<span>1</span>",
        },
      ],
      events: {
        init: (o) => {
          console.log(o.getCenter());
          console.log(this.$refs.map.$$getInstance());
          o.getCity((result) => {
            console.log(result);
          });
        },
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          let { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
          console.log(self.lng, self.lat);
          let points = [self.lng, self.lat];
          this.getAddress(points);
          let marker = {
            position: [self.lng, self.lat],
          };
          if (!this.markers.length) return;
          this.markers.splice(this.markers.length - 1, 1);

          this.markers.push(marker);
        },
      },

      getAddress(points) {
        let geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" });
        geocoder.getAddress(points, (status, result) => {
          if (status === "complete" && result.regeocode) {
            this.address = result.regeocode.formattedAddress;
            console.log(this.address);
          }
        });
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            },
          },
        },
      ],
      texts: [
        {
          position: [121.5273285, 31.21515044],
          text: "hello world",
          offset: [0, 0],
          events: {
            click: () => {
              alert("click text");
            },
          },
        },
      ],
    };
  },
  methods: {
    getMap() {
      console.log(AMapManager._componentMap);
      // gaode map instance
      console.log(AMapManager._map);
      alert("click text");
    },
  },
};
</script>

